@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
body{
    background: url(../img/影片开头.png) no-repeat;
    background-size: cover;
    animation: film 40s  infinite;
}
/*幕布帧率*/
@keyframes film {
    0%{
        background: url(../img/影片开头.png) no-repeat;
        background-size: cover;
    }
    9%{
        background: url(../img/影片开头.png) no-repeat;
        background-size: cover;
    }
    10%{
        background: url(../img/城市蒙版.png) no-repeat;
        background-size: cover;
    }
    19%{
        background: url(../img/城市蒙版.png) no-repeat;
        background-size: cover;
    }
    20%{
        background: url(../img/城市.png) no-repeat;
        background-size: cover;
    }
    39%{
        background: url(../img/城市.png) no-repeat;
        background-size: cover;
    }
    40%{
        background: url(../img/气氛图.png) no-repeat;
        background-size: cover;
    }
    54%{
        background: url(../img/气氛图.png) no-repeat;
        background-size: cover;
    }
    55%{
        background: url(../img/城市.png) no-repeat;
        background-size: cover;
    }
    74%{
        background: url(../img/城市.png) no-repeat;
        background-size: cover;
    }
    75%{
        background: url(../img/大招.png) no-repeat;
        background-size: cover;
    }
    79%{
        background: url(../img/大招.png) no-repeat;
        background-size: cover;
    }
    80%{
        background: url(../img/黑屏.png) no-repeat;
        background-size: cover;
    }
    85%{
        background: url(../img/黑屏.png) no-repeat;
        background-size: cover;
    }
    90%{
        background: url(../img/广告.png) no-repeat;
        background-size: cover;
    }
    100%{
        background: url(../img/广告.png) no-repeat;
        background-size: cover;
    }
}
/*文字*/
#titleText{
    width: 1000px;
    height: 500px;
    font-size: 150px;
    color:white;
    text-align: center;
    margin: 200px;
    position: absolute;
    top: 10px;
    left: 10px;
    animation: titText 40s linear infinite;
}
/*文字帧率*/
@keyframes titText{
    0%{
        position: absolute;
        top: 10px;
    }
    9%{
        position: absolute;
        top: 10px;
    }
    10%{
        /*隐藏影片开头字*/
        position: absolute;
        top: -2000px;
    }
    100%{
        position: absolute;
        top: -2000px;
    }
}
/*怪兽*/
.monster{
    background: url(../img/怪兽.png) no-repeat;
    background-size: cover;
    height: 700px;
    width: 500px;
    position: absolute;
    top: 10px;
    left: 10px;
    animation: mon 40s linear infinite;
}
/*怪兽帧率*/
@keyframes mon {
    0% {
        position: absolute;
        top: -1000px;
        left: 200px;
    }
    19% {
        position: absolute;
        top: -1000px;
        left: 200px;
    }
    /*怪兽出场*/
    20% {
        position: absolute;
        top: -500px;
        left: 200px;
    }
    21% {
         position: absolute;
         top: -100px;
         left: 200px;
     }
    25%{
        position: absolute;
        top: 100px;
        left: 200px;
    }
    39%{
        position: absolute;
        top: 100px;
        left: 200px;
    }
    /*怪兽收场*/
    40%{
        position: absolute;
        top: -10000px;
        left: 200px;
        display: none;
    }
    /*怪兽出场战斗*/
    55%{
        position: absolute;
        top: 100px;
        left: 800px;
    }
    /*怪兽战斗中*/
    56%{
        position: absolute;
        top: 100px;
        left: 800px;
    }
    57%{
        position: absolute;
        top: 100px;
        left: 600px;
    }
    58%{
        position: absolute;
        top: 100px;
        left: 800px;
    }
    61%{
        position: absolute;
        top: 100px;
        left: 800px;
    }
    62%{
        position: absolute;
        top: 100px;
        left: 600px;
    }
    63%{
        position: absolute;
        top: 100px;
        left: 800px;
    }
    67% {
        position: absolute;
        top: 100px;
        left: 800px;
    }
    68%{
        position: absolute;
        top: 100px;
        left: 600px;
    }
    69%{
        position: absolute;
        top: 100px;
        left: 800px;
    }
    74%{
        position: absolute;
        top: 100px;
        left: 800px;
    }
    75%{
        position: absolute;
        top: -10000px;
        left: 200px;
    }
    100%{
        position: absolute;
        top: -10000px;
        left: 200px;
    }
}
/*人群1*/
.cross1{
    background: url(../img/人群1.png) no-repeat;
    background-size: cover;
    height: 500px;
    width: 1000px;
    position: absolute;
    top: 10px;
    left: 10px;
    animation: cross1 40s linear infinite;
}
@keyframes cross1 {
    0%{
        position: absolute;
        top: 2000px;
        left: 200px;
    }
    22%{
        position: absolute;
        top: 1000px;
        left: -30px;
    }
    25%{
        position: absolute;
        top: 300px;
        left: -30px;
    }
    30%{
        position: absolute;
        top: 450px;
        left: -70px;
    }
    35%{
        position: absolute;
        top: 300px;
        left: -30px;
    }
    38%{
        position: absolute;
        top: 450px;
        left: -70px;
    }
    39%{
        position: absolute;
        top: 2000px;
        left: -30px;
    }
    100%{
        position: absolute;
        top: 2000px;
        left: 200px;
    }
}
.cross2{
    background: url(../img/人群2.png) no-repeat;
    background-size: cover;
    height: 300px;
    width: 600px;
    position: absolute;
    top: 10px;
    left: 10px;
    animation: cross2 40s linear infinite;
}
@keyframes cross2 {
    0%{
        position: absolute;
        top: 2000px;
        left: 200px;
    }
    22%{
        position: absolute;
        top: 1000px;
        left: 930px;
    }
    25%{
        position: absolute;
        top: 550px;
        left: 930px;
    }
    30%{
        position: absolute;
        top: 450px;
        left: 890px;
    }
    35%{
        position: absolute;
        top: 550px;
        left: 930px;
    }
    38%{
        position: absolute;
        top: 450px;
        left: 890px;
    }
    39%{
        position: absolute;
        top: 1000px;
        left: 990px;
    }
    100%{
        position: absolute;
        top: 2000px;
        left: 200px;
    }
}
.outman1{
    background: url(../img/奥特曼1.png) no-repeat;
    background-size: cover;
    height: 1000px;
    width: 500px;
    position: absolute;
    top: 10px;
    left: 10px;
    animation: outman1 40s linear infinite;
}
@keyframes outman1 {
    0% {
        position: absolute;
        top: 2000px;
        left: 200px;
    }
    /*奥特曼出场*/
    39% {
        position: absolute;
        top: 800px;
        left: 200px;
    }
    47% {
        position: absolute;
        top: -150px;
        left: 200px;
    }
    54%{
        position: absolute;
        top: -150px;
        left: 200px;
    }
    /*奥特曼收场*/
    55% {
        position: absolute;
        top: 10000px;
        left: 200px;
    }
    100% {
        position: absolute;
        top: 10000px;
        left: 200px;
    }
}
.outman2{
    background: url(../img/奥特曼2.png) no-repeat;
    background-size: cover;
    height: 700px;
    width: 500px;
    position: absolute;
    top: 10px;
    left: 10px;
    animation: outman2 40s linear infinite;
}
@keyframes outman2 {
    0% {
        position: absolute;
        top: -1000px;
        left: 200px;
    }
    54%{
        position: absolute;
        top: -1000px;
        left: 200px;
    }
    /*奥特曼出场战斗*/
    55% {
        position: absolute;
        top: 0;
        left: 200px;
    }
    /*奥特曼战斗中*/
    58%{
        position: absolute;
        top: 0;
        left: 200px;
    }
    59%{
        position: absolute;
        top: -50px;
        left: 350px;
    }
    60%{
        position: absolute;
        top: 0;
        left: 700px;
    }
    61%{
        position: absolute;
        top: 0;
        left: 200px;
    }
    63%{
        position: absolute;
        top: 0px;
        left: 200px;
    }
    64%{
        position: absolute;
        top: 0px;
        left: -100px;
    }
    65%{
        position: absolute;
        top: 0px;
        left: 200px;
    }
    69%{
        position: absolute;
        top: 0px;
        left: 200px;
    }
    70%{
        position: absolute;
        height: 700px;
        width: 500px;
        top: 0px;
        left: 200px;
    }
    71%{
        position: absolute;
        height: 1000px;
        width: 800px;
        top: 0px;
        left: 200px;
    }
    72%{
        position: absolute;
        height: 700px;
        width: 500px;
        top: 0px;
        left: 200px;
    }
    73%{
        position: absolute;
        height: 7000px;
        width: 5000px;
        top: 0px;
        left: 200px;
    }
    74% {
        position: absolute;
        height: 700px;
        width: 500px;
        top: -20000px;
        left: 200px;
    }
    100% {
        position: absolute;
        height: 700px;
        width: 500px;
        top: -20000px;
        left: 200px;
    }
}
.outman3{
    background: url(../img/奥特曼3.png) no-repeat;
    /*background-size: cover;*/
    height: 100px;
    width: 100px;
    position: absolute;
    top: 10px;
    left: 10px;
    animation: outman3 40s linear infinite;
}
@keyframes outman3 {
    0% {
        position: absolute;
        top: 300px;
        left: -100px;
    }
    64% {
        position: absolute;
        top: 300px;
        left: -100px;
    }
    65% {
        position: absolute;
        top: 300px;
        left: 50px;
    }
    67% {
        position: absolute;
        top: 300px;
        left: 3000px;
    }
    100% {
        position: absolute;
        top: 300px;
        left: 3000px;
    }
}
.windows{
    background: url(../img/弹窗.png) no-repeat;
    /*background-size: cover;*/
    height: 200px;
    width: 500px;
    position: absolute;
    top: 10px;
    left: 10px;
    animation: windows 40s linear infinite;
}
@keyframes windows {
    0%{
        position: absolute;
        top: -5000px;
        left: -5000px;
    }
    72%{
        position: absolute;
        top: -5000px;
        left: -5000px;;
    }
    73%{
        position: absolute;
        top: 300px;
        left: 100px;
    }
    74%{
        position: absolute;
        top: 300px;
        left: 100px;
    }
    75%{
        position: absolute;
        top: -5000px;
        left: -5000px;
    }
    100%{
        position: absolute;
        top: -5000px;
        left: -5000px;
    }
}
.ADlink{
    width: 500px;
    height: 100px;
    position: absolute;
    top: 450px;
    left: 500px;
    font-size: 35px;
    color: #fff;
    animation: ADlink 40s linear infinite;
}
@keyframes ADlink {
    0%{
        top: -5000px;
        left: -5000px;
    }
    89%{
    top: -5000px;
    left: -5000px;
    }
    90%{
        top: 450px;
        left: 500px;
        color: #ffffff;
    }
    100%{
        color: #ffffff;
    }
}
.titText1{
    width: 2000px;
    height: 100px;
    position: absolute;
    top: 450px;
    left: 500px;
    font-size: 160px;
    font-family: 隶书;
    color: #fff;
    animation: titText1 40s linear infinite;
}
@keyframes titText1 {
    0%{
        top: -5000px;
        left: -5000px;
    }
    39%{
        top: 2000px;
        left: -500px;
    }
    40%{
        top: 1000px;
        left: 600px;
    }
    49%{
        top: 300px;
        left: 600px;
    }
    54%{
        top: 300px;
        left: 600px;
    }
    55%{
        top: -5000px;
        left: -5000px;
    }
    100%{
        top: 450px;
        left: 500px;
        color: #ffffff;
    }
}